<html lang="en" style="background-image: url('./images/bg.jpg');background-repeat: no-repeat;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>login</title>

    <!-- Google Font: Source Sans Pro -->
<!--    <link rel="stylesheet"-->
<!--          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&amp;display=fallback">-->
    <!-- Font Awesome -->
<!--    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">-->
    <!-- icheck bootstrap -->
<!--    <link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">-->
    <!-- Theme style -->
<!--    <link rel="stylesheet" href="../dist/css/adminlte.min.css">-->
    <script src="../dist/js/vue.js"></script>
    <script src="../dist/js/axios.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style>
        #loginForm {
            border: 1px solid black;
            border-radius: 3px;
            margin: 0 auto;
            margin-top: 120px;
            width: 500px;
            height: 500px;
            background-color: rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 0.1rem #c2c2c2;
        }

        .btn{
            height: 45px;
            margin:10px 0;
        }
        .form-group {
            padding: 0 60px;
            width: 100%;
        }

        .form-control {
            width: 100%;
            height: 45px;
        }

        .text-danger {
            font-size: 13px;
            font-weight: bold;
        }
    </style>
</head>
<body class="" style="min-height: 466px;background-color: transparent">
<div id="app">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                 <a class="navbar-brand" href="/views/client/index.html">MALL</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">MALL</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <!--                <li class=""><a href="#">Link <span class="sr-only">(current)</span></a></li>-->
                    <!--                <li><a href="#">Link</a></li>-->

                </ul>
                <form class="navbar-form navbar-left">
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./register.html">注册</a></li>
                    <li><a href="./login.html ">登录</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <form id="loginForm" action="/client/login" method="post">
        <div class="panel-title" style="margin:20px 0 30px 20px;">
            <h2  class="card-title" style="font-size: 30px;display: inline-block">MALL</h2>
            <span style="vertical-align: top">登录</span>
        </div>
        <div class="form">
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <span class="text-danger" v-if="username===''">用户名不应为空</span>
                <input v-model.trim="username" type="email" class="form-control" id="exampleInputEmail1" name="username"
                       placeholder="邮箱">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input v-model.trim="password" type="password" class="form-control" id="exampleInputPassword1"
                       name="password" placeholder="密码" v-on:keyup.enter="login()">
                <span class="text-danger" v-if="error">用户名或密码错误</span>
            </div>
            <div class="form-group clearfix">
                <button @click="login()" type="button" style="float: left"
                        class="left col-lg-5 col-md-5 col-md-5 col-xs-12   btn btn-success">登录
                </button>
                <a href="./register.html">
                    <button type="button" style="float: right" class="right col-lg-5 col-md-5 col-md-5 col-xs-12 btn btn-primary">注册
                    </button>
                </a>
            </div>
        </div>
    </form>

</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<!--<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>-->
<!-- AdminLTE App -->
<!--<script src="../dist/js/adminlte.min.js"></script>-->
<script src="./js/bootstrap.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            username: "",
            password: "",
            error: false
        },
        methods: {
            login: function () {
                if (this.username === "") {
                    return;
                }
                if (this.password === "") {
                    return;
                }
                console.log(this.username);
                console.log("执行登录！");
                axios.post("/client/login", {
                    username: this.username,
                    password: this.password
                }, {
                    headers: {
                        // 'Content-Type': 'application/x-www-form-urlencoded',
                        // 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
                    },
                }).then(function (response) {
                    if (response.data.code === 200) {
                        console.log("登录成功！");
                        localStorage.setItem("accessToken", response.data.data.accessToken);
                        localStorage.setItem("refreshToken", response.data.data.accessToken);
                        setTimeout(function () {
                            // alert(1)
                            window.location.href = "/views/client/index.html";
                        }, 100)
                        return;
                    }
                    this.app.error = true;
                }).catch(function (err) {
                    console.log(err);
                })
            }
        }
    });
</script>
</body>
</html>